<template>
  <view>
      <u-toast ref="uToast"></u-toast>
      <view>
        <view class="padding-sm bg-white">
          <view class="flex">
            <view style="width: 90%;" class="flex flex-direction">
              <text class="text-bold text-xl">{{info.title}}</text>
              <text class="text-gray text-sm margin-top-xs">{{ info.category.name }}</text>
            </view>
          </view>
        </view>

        <view class="margin-tb margin-lr-sm" style="background: white">
          <u-swiper :autoplay="true" imgMode="aspectFill" :list="[info.image]" indicator
                    indicatorMode="line" circular height="450rpx"></u-swiper>
        </view>

        <view class="margin-tb-sm padding-sm bg-white">
          <view class="text-bold text-lg ">介绍</view>
          <view class="text-sm text-gray margin-top-sm" v-html="info.content" style="width: 100%"></view>
        </view>
    </view>
    <u-gap height="150"></u-gap>
    <view class="boom-nav boom-nav-other">
      <view class="nav-cart">
       <view class="nav-price"> {{ info.price || 0 }} <text>元</text> </view>
        <view class="nav-ret">
          <view class="cart-btn buys" @click="buy()">立即购买</view>
        </view>
      </view>
    </view>
    <PopupVue ref="PopupVue"/>
  </view>
</template>
<script>
import PopupVue from './components/popup/popup.vue'
export default {
  name: "detail",
  components: {
    PopupVue
  },
  data(){
    return {
      info: '',
      id: ''
    }
  },
  onLoad(e){
    this.id = e.id
    this.init()
  },
  methods:{
    init(){
      uni.$u.http.post('getCounselServiceDetail', {
        id: this.id
      }).then(res => {
        this.info = res.data
      })
    },
    goBack(){
      uni.navigateBack({
        delta: 1
      })
    },
    buy(){
      this.$refs.PopupVue.show(this.info)
    }
  }
}
</script>



<style scoped lang="scss">
.boom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #FFFFFF;

  z-index: 9999;

  .nav-cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 110rpx;
  }

  .nav-service {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    padding-left: 20rpx;
    .service-item {
      padding: 0rpx 24rpx;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      button {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        opacity: 0;
      }

      image {
        width: 38rpx;
        height: 38rpx;
        margin-bottom: 5rpx;
      }

      .textss {
        color: #333333;
        font-size: 18rpx;
      }

    }
  }

  .nav-ret {
    display: flex;
    align-items: center;
    padding-right: 16rpx;

    .cart-btn {
      width: 206rpx;
      height: 76rpx;
      text-align: center;
      line-height: 76rpx;
      border-radius: 38rpx;
      color: #FFFFFF;
      font-size: 26rpx;
    }

    .cart-btn-ac {
      border: 1rpx solid #FF940F;
      color: #FF940F;
      margin-right: 20rpx;
    }

    .carts {
      background: linear-gradient(271deg, #FF940F 0%, #FEC90B 100%);
      margin-right: 14rpx;
    }

    .buys {
      background: linear-gradient(271deg, #F6241F 0%, #FC684D 100%);
    }
  }

}
.nav-price {
  font-size: 60rpx;
  color: #e4393c;
  padding-left: 20rpx;
  font-weight: bold;
  text {
    font-size: 32rpx;
    font-weight: 400;
    margin-left: 10rpx;
  }
}


</style>